<script>
// 如果想要使用mapState的话，就需要自己引入
import {mapState} from "vuex";
import {nanoid} from "nanoid";

export default {
  name: 'Person',
  data() {
    return {
      name: '',
    }
  },
  computed: {
    // // 程序员编写代码，使用计算属性实现
    // personList() {
    //   return this.$store.state.personList;
    // },
    // 使用 mapState生成代码片段
    ...mapState([
      'personList',
      'sum',
    ]),
  },
  methods: {
    add() {
      const person = {
        id: nanoid(),
        name: this.name,
        age: 18
      }
      console.log(JSON.stringify(person));
      // 如果没有业务操作，可以直接跳过Actions，执行mutations
      this.$store.commit('ADD_PERSON', person);
      // 添加成功之后将输入框置空
      this.name = '';
    }
  }
}

</script>

<template>
  <div>
    <h1>人员列表：</h1>
    <h2 style="color: red">Count组件的sum：{{ sum }}</h2>
    <input @keyup.enter="add()"
           placeholder="请输入您的姓名"
           type="text"
           v-model.trim="name"/>
    <button @click="add()">添加</button>
    <ul>
      <!-- <li v-for="p in $store.state.personList" :key="p.id">{{p.name}} - {{ p.age}}</li>-->
      <li v-for="p in personList" :key="p.id">{{ p.name }} - {{ p.age }}</li>
    </ul>
  </div>
</template>

<style scoped>

</style>